<template>
  <div class="box">
    <!-- 1.导航栏 -->
    <van-nav-bar
      title="推荐"
      left-arrow
      fixed=""
      @click-left="$router.go(-1)"
    />
    <div v-if="text.diary_kind">
      <!-- 2. 详情区 -->
      <div class="Redetail-data">
        <!-- 2.1 详情大图 -->
        <div class="pic">
          <img :src="this.text.diary_issue_pic" alt="" />
        </div>
        <!-- 2.2 用户名及详细描述等 -->
        <div class="detail">
          <dl>
            <dt>
              <img :src="this.text.diary_issue_via" alt="" style="width:.3rem;height:.3rem;border-radius:50%;"/>
              <div style="position: relative;left: 0.1rem;top:.1rem;display:inline-block;">
                <p>{{this.text.diary_issue_nickname}}</p>
                <span>{{this.text.diary_issue_time}}</span>
              </div>
            </dt>
            <dd>{{this.text.diary_issue_content}}</dd>
          </dl>
        </div>
        <!-- 2.3 商品卡片 -->
        <div class="recommend_pro">
          <div class="recommend_pro_box" @click="toProDetail(recommendProDetail.proid)">
            <img :src="recommendProDetail.pro_pic" alt="">
            <div class="recommend_pro_box_right">
              <p>{{recommendProDetail.pro_introduce}}</p>
              <p>
                <span>{{recommendProDetail.clinic_name}}</span>
                <span>{{recommendProDetail.distance + 'km'}}</span>
              </p>
              <p>
                <span>{{'￥' + recommendProDetail.pro_price}}</span>
                <span>{{recommendProDetail.subscribe + '预约'}}</span>
              </p>
            </div>
          </div>
          <div class="recommend_pro_bottom">900人已看</div>
        </div>
        <!-- 3. 提问区 ：还需考虑多个问题显示以及实时评论-->
        <div class="issue" v-if="text.comment.length !== 0">
          <h3>问题</h3>
          <div class="comment" v-for="(item, index) in text.comment" :key="index">
            <div class="issue_message">
              <img :src="item.diary_comment_user" alt="">
              <p>{{item.diary_comment_via}}</p>
            </div>
            <div class="issue_content">{{item.diary_comment_content}}</div>
          </div>
        </div>
      </div>
      <!-- 4.底部组件 -->
      <div class="refoot">
        <input type="text" placeholder="评论赢大奖" maxlength="200" :value="value" @keydown="keyDown" @change="clearInput">
        <span @click="like">
          <van-icon v-if="refootLickShowBool" class="refoot_icon" name="like-o" />
          <van-icon v-else class="refoot_iconSelect" name="like" />
          <b>{{this.text.diary_num_like}}</b>
          <!-- <b>100</b> -->
        </span>
        <span @click="star">
          <van-icon v-if="refootCollectShowBool" class="refoot_icon" name="star-o" />
          <van-icon v-else class="refoot_iconSelect" name="star" />
          <b>{{this.text.diary_num_collect}}</b>
          <!-- <b>100</b> -->
        </span>
        <span>
          <van-icon class="refoot_icon" name="chat-o" />
          <b>{{this.text.comment.length}}</b>
          <!-- <b>100</b> -->
        </span>
      </div>
    </div>
    <Loading v-else />
  </div>
</template>

<script>
import Loading from '../../components/loading'
import Vue from 'vue'
import { getDiaryById, getProductById, getDiaryCollect, getUserMessage, addDiaryComment } from '@/api'
import { NavBar, Icon, Divider, Field, CellGroup, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Divider)
Vue.use(Field)
Vue.use(CellGroup)
Vue.use(Toast)
export default {
  data () {
    return {
      value: '',
      proid: '',
      text: [], // 根据diary_id获取推荐详情
      card: [], // 商品信息
      refootLickShowBool: true,
      refootCollectShowBool: true,
      diary_id: '',
      recommendProDetail: [],
      reid: '',
      loginState: localStorage.getItem('loginState_AM')
    }
  },
  computed: {},
  components: {
    Loading
  },
  mounted () {
    // 获取地址栏参数,根据diary_id值获取对应推荐内容的详情
    const { diaryid } = this.$route.params
    this.reid = diaryid.split('=')[1]
    // 获取推荐详情
    this.getDiaryDetail(this.reid)
  },
  methods: {
    toProDetail (proid) {
      this.$router.push({ path: '/proDetail', query: { proid } })
    },
    keyDown (e) {
      const key = window.event.keyCode
      if (key === 13) {
        if (this.loginState === 'no' || this.loginState === null) {
          Toast('您还没有登录，快去登录吧')
          setTimeout(() => {
            this.$router.push('/login')
          }, 300)
        } else {
          if (e.target.value !== '') {
            getUserMessage({
              username: localStorage.getItem('userTel_AM'),
              token: localStorage.getItem('token_AM')
            }).then(res => {
              if (res.data.code === '200') {
                const userobj = res.data.data[0]
                // console.log(userobj)
                const discussObj = {
                  diary_id: this.diary_id,
                  diary_comment_user: userobj.uservia,
                  diary_comment_via: userobj.usernickname === '用户昵称' ? '爱美用户' : userobj.usernickname,
                  diary_comment_content: e.target.value,
                  username: userobj.username
                }
                addDiaryComment({ discussObj }).then(res => {
                  // console.log(res)
                  if (res.data.code === '200') {
                    Toast('添加成功')
                    this.clearInput()
                    this.getDiaryDetail(this.reid)
                  }
                })
              }
            })
          }
        }
      }
    },
    clearInput () {
      this.value = ''
    },
    getDiaryDetail (reid) {
      getDiaryById({
        diary_id: reid,
        username: localStorage.getItem('userTel_AM')
      }).then(res => {
        // console.log(res)
        if (res.data.code === '200') {
          this.proid = res.data.data[0].diary_recommend_proid
          this.text = res.data.data[0]
          // console.log(this.text)
          this.diary_id = res.data.data[0].diary_id
          if (this.text.isup === 1) {
            this.refootLickShowBool = false
          } else {
            this.refootLickShowBool = true
          }
          if (this.text.iscollect === 1) {
            this.refootCollectShowBool = false
          } else {
            this.refootCollectShowBool = true
          }
          // 获取该推荐详情的推荐商品信息
          getProductById({
            proid: this.proid,
            username: localStorage.getItem('userTel_AM') ? localStorage.getItem('userTel_AM') : '11000000000'
          }).then(res => {
            if (res.data.code === '200') {
              this.recommendProDetail = res.data.data[0]
            }
          })
        }
      })
    },
    // 点赞事件
    like () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      } else {
        if (this.refootLickShowBool) {
          getDiaryCollect({
            username: localStorage.getItem('userTel_AM'),
            diary_id: this.diary_id,
            // diary_id: 200001,
            like: 1,
            collect: 2
          }).then(res => {
            if (res.data.code === '200') {
              this.refootLickShowBool = false
              Toast('已点赞')
              this.text.diary_num_like += 1
            }
          })
        } else {
          getDiaryCollect({
            username: localStorage.getItem('userTel_AM'),
            diary_id: this.diary_id,
            // diary_id: 200001,
            like: 0,
            collect: 2
          }).then(res => {
            if (res.data.code === '200') {
              this.refootLickShowBool = true
              Toast('取消点赞')
              this.text.diary_num_like -= 1
            }
          })
        }
      }
    },
    // 收藏事件
    star () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      } else {
        if (this.refootCollectShowBool) {
          getDiaryCollect({
            username: localStorage.getItem('userTel_AM'),
            diary_id: this.diary_id,
            // diary_id: 200001,
            like: 2,
            collect: 1
          }).then(res => {
            if (res.data.code === '200') {
              this.refootCollectShowBool = false
              Toast('已收藏')
              this.text.diary_num_collect += 1
            }
          })
        } else {
          getDiaryCollect({
            username: localStorage.getItem('userTel_AM'),
            diary_id: this.diary_id,
            // diary_id: 200001,
            like: 2,
            collect: 0
          }).then(res => {
            if (res.data.code === '200') {
              this.refootCollectShowBool = true
              Toast('取消收藏')
              this.text.diary_num_collect -= 1
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-cell {
  line-height: .24rem;
  background-color: #efefef;
  border-radius: .2rem;
  padding-left: .06rem;
  font-size: .12rem;
}
/deep/.van-nav-bar {
  height: .46rem;
  line-height: .46rem;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #171717;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
.Redetail-data {
  height: auto;
  color: #666666;
  margin: 0.46rem .1rem 0.44rem .1rem;
  .pic {
    height: 3.05rem;
    background-color: #fff8f8;
    margin-bottom: .1rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detail {
    padding: 0 0.1rem;
    dl {
     margin-bottom: .1rem;
      dt {
        margin: .15rem 0;
        p {
          color: #333333;
          font-weight: bold;
        }
        span {
           display:inline-block;
           -webkit-transform-origin-x: 0;
           -webkit-transform: scale(0.80);
        }
      }
    }
  }
}
.recommend_pro {
  width: 100%;
  padding: 0.2rem 0.1rem;
  height: 1.9rem;
  .recommend_pro_box {
    width: 100%;
    height: 1.13rem;
    background:rgba(255,248,248,1);
    box-shadow: 0px 0.04rem 0.05rem 0px rgba(97,97,97,0.2);
    border-radius: 0.05rem;
    padding: 0.16rem 0.1rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      float: left;
      margin-right: 0.1rem;
    }
    .recommend_pro_box_right {
      float: left;
      width: 2.25rem;
      height: 0.8rem;
      p:nth-of-type(1) {
        height: 0.36rem;
        line-height: 0.18rem;
        font-size: 0.12rem;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 0.06rem;
      }
      p:nth-of-type(2) {
        width: 100%;
        height: 0.16rem;
        margin-bottom: 0.06rem;
        span:nth-of-type(1) {
          float: left;
          max-width: 1.8rem;
          font-size: 0.1rem;
          line-height: 0.16rem;
          color: #666666;
          margin-right: 0.1rem;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
        span:nth-of-type(2) {
          float: left;
          max-width: 1.8rem;
          font-size: 0.1rem;
          line-height: 0.16rem;
          color: #666666;
        }
      }
      p:nth-of-type(3) {
        width: 100%;
        height: 0.16rem;
        line-height: 0.16rem;
        span:nth-of-type(1) {
          float: left;
          max-width: 1.8rem;
          font-size: 0.12rem;
          line-height: 0.16rem;
          color: #FF5959;
        }
        span:nth-of-type(2) {
          float: right;
          max-width: 1.8rem;
          font-size: 0.1rem;
          line-height: 0.16rem;
          color: #666666;
        }
      }
    }
  }
  .recommend_pro_bottom {
    width: 100%;
    height: 0.35rem;
    border-bottom: 1px solid #b0b0b0;
    font-size: 0.1rem;
    color: #828282;
    line-height: 0.35rem;
  }
}
.issue {
  width: 100%;
  height: auto;
  padding: 0 0.2rem;
  margin-bottom: 0.2rem;
  h3 {
    height: 0.16rem;
    line-height: 0.16rem;
    font-size: 0.14rem;
    margin-left: 0.2rem;
    color: #333333;
    margin-bottom: 0.2rem;
  }
  .comment {
    margin-bottom: 0.2rem;
  }
  .issue_message {
    width: 100%;
    height: 0.3rem;
    margin-bottom: 0.1rem;
    img {
      width: 0.3rem;
      height: 0.3rem;
      float: left;
      margin-right: 0.1rem;
      border-radius: 50%;
      border: 1px solid #e5e5e5;
      box-sizing: border-box;
    }
    p {
      float: left;
      max-width: 2rem;
      overflow:hidden;
      color: #999999;
      font-size: 0.12rem;
      line-height: 0.12rem;
      margin-top: 0.12rem;
      text-overflow:ellipsis;
      white-space:nowrap
    }
  }
  .issue_content {
    max-width: 2.9rem;
    height: auto;
    margin-left: 0.4rem;
    text-align: left;
    font-size: 0.12rem;
    color: #666666;
    line-height: 0.14rem;
    word-wrap: break-word;
  }
}
.refoot {
  height: 0.44rem;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0 0.1rem;
  background: white;
  input {
    width: 1.9rem;
    height: 0.3rem;
    margin: 0.07rem 0;
    border: 1px solid #f0f0f0;
    border-radius: 0.15rem;
    float: left;
    padding: 0 0.1rem;
    line-height: 0.3rem;
  }
  span {
    float: left;
    margin-left: 0.1rem;
    width: 0.45rem;
    height: 0.44rem;
    line-height: 0.44rem;
    b {
      line-height: 0.44rem;
      float: left;
      color: #828282;
      margin-left: 0.04rem;
    }
    .refoot_icon {
      font-size: 0.2rem;
      line-height: 0.44rem;
      float: left;
      color: #828282;
    }
    .refoot_iconSelect {
      font-size: 0.2rem;
      line-height: 0.44rem;
      color: #ff5959;
      float: left;
    }
  }
}
</style>
